<template>
    <div>
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item label="编号" prop='id'>
                <el-input v-model="formData.id" placeholder="请输入类目编号" clearable />
            </el-form-item>
            <el-form-item label="类目名称" prop='name'>
                <el-input v-model="formData.name" placeholder="请输入类目名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="productData" style="width: 100%">
            <el-table-column fixed prop="id" label="编号" width="80" />
            <el-table-column prop="name" label="商品名称" width="120" />
            <el-table-column prop="subName" label="商品副名称" width="100" />
            <el-table-column prop="img" label="商品图片" width="120">
                <template #default="scope">
                    <img :src='scope.row.img' alt="" width="50" height="50">
                </template>
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="120" />
            <el-table-column prop="seq" label="商品排序" width="90" />
            <el-table-column prop="status" label="商品状态" width="90" />
            <el-table-column prop="categoryId" label="父目录ID" width="120" />
            <el-table-column prop="lastUpdateTime" label="最后更新时间" width="120" />
            <el-table-column fixed="right" label="操作" width="140">
                <template #default="scope">
                    <el-button type="danger" size="small" @click="offlineClick(scope.row)">下线</el-button>
                    <el-button type="success" size="small" @click="handleClick(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, prev, pager, next" :page-size="pageData.pageSize"
            :total="pageData.total" @current-change="handleCurrentChange" />

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { CategoryApi ,ProductApi} from '@/api'
import { ElMessage, ElMessageBox } from 'element-plus'
//router 的应用
import { useRouter } from 'vue-router'
const router = useRouter()

const productData = ref([])
const formData = reactive({
    name: '',
    id: '',
    ids: []
})
const pageData = reactive({
    pageNum: 1, //当前页码
    pageSize: 3,//每页显示条数
    total: 20  //总数居
})

//页面渲染 生命周期钩子函数里面的挂载
onMounted(() => {
    callCategory()
})
const callCategory = () => {
    let name = formData.name === '' ? null : formData.name;
    let id = formData.id === '' ? null : formData.id;

    ProductApi.select.call({
        name: name, id: id,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res: any) => {
        console.log(res);
        //数据赋值
        productData.value = res.items;
        pageData.total = res.total;

    })
}
const handleCurrentChange = (val: number) => {
    pageData.pageNum = val;
    console.log(`current page: ${val}`)
    callCategory()
}

//删除按钮事件
const offlineClick = (row: any) => {
    ElMessageBox.confirm(
        '您确认要对 ~' + row.name + '~ 进行下线操作吗?',
        '警告提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            CategoryApi.delete.call({ id: row.id }).then((res: any) => {
                console.log(res);
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })
                //更新当前页面数据
                callCategory()

            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作'
            })
        })
}
//修改按钮事件
const handleClick = (row: any) => {
    router.push({ name: 'product-edit', query: { id: row.id } })
}

const onSubmit = () => {
    // 输出提交信息
    console.log('submit!')
    callCategory()
}
</script>

<style scoped></style>